<template>
	<el-row :gutter="20" justify="space-around" style="margin-top: 20px;">
	    <el-col :span="4">
			<el-card body-style="max-width: 480px;max-height: 100px;padding:0px;">
				<p class="top-text-l">预约挂号数<span class="top-text-l-s">663</span></p>
				<div class="progress">
				      <div class="progress-bar1"></div>
				</div>			
				<p class="increase-text"><SvgIcon name="up" class="icon-svg" />27% 较上月同期增长</p>
			</el-card>
		</el-col>
	    <el-col :span="4">
			<el-card body-style="max-width: 480px;max-height: 100px;padding:0px;">
				<p class="top-text-l">药品入库数<span class="top-text-l-s">467</span></p>
				<div class="progress">
				      <div class="progress-bar2"></div>
				</div>			
				<p class="increase-text"><SvgIcon name="up" class="icon-svg" />34% 较上月同期增长</p>
			</el-card>
        </el-col>
	    <el-col :span="4">
			<el-card body-style="max-width: 480px;max-height: 100px;padding:0px;">
				<p class="top-text-l">药品出库数<span class="top-text-l-s">338</span></p>
				<div class="progress">
				      <div class="progress-bar3"></div>
				</div>			
				<p class="increase-text"><SvgIcon name="up" class="icon-svg" />37% 较上月同期增长</p>
			</el-card>
        </el-col>
	    <el-col :span="4">
	    	<el-card body-style="max-width: 480px;max-height: 100px;padding:0px;">
	    		<p class="top-text-l">药品数<span class="top-text-l-s">87</span></p>
	    		<div class="progress">
	    		      <div class="progress-bar4"></div>
	    		</div>			
	    		<p class="increase-text"><SvgIcon name="up" class="icon-svg" />8% 较上月同期增长</p>
	    	</el-card>
	    </el-col>
		<el-col :span="4">
			<el-card body-style="max-width: 480px;max-height: 100px;padding:0px;">
				<p class="top-text-l">在职医生数<span class="top-text-l-s">18</span></p>
				<div class="progress">
				      <div class="progress-bar5"></div>
				</div>			
				<p class="increase-text"><SvgIcon name="up" class="icon-svg" />2% 较上月同期增长</p>
			</el-card>
		</el-col>
	</el-row>
	<el-row :gutter="40" justify="space-around" style="margin-top: 40px;padding-left: 25px;padding-right: 25px;">
		<el-col :span="6">
			<el-card class="box-card" body-style="padding:20px;max-height: 350px;">
			    <div class="scroll-container">
			      <div v-for="message in messages" :key="message.date" class="text item">
					  <p @click="togglePopover()" style="align-items: center; display: flex; flex-direction: row;">
					    <SvgIcon name="clock" class="icon-svg" />
					    {{ message.create_time }}
					  </p>
			        <el-popover placement="top" width="160" trigger="click" v-model="visible">
			          <template #reference>
						<p  @click="togglePopover()" slot="reference">{{ message.message }}</p>
			          </template>
			          <p>在这里选择您要进行的操作</p>
			          <div style="text-align: right; margin: 0">
			            <el-button @click="addHandle()">新增</el-button>
			            <el-button @click="updateHandle(message.id)">修改</el-button>
						<el-button @click="deleteHandle(message.id)">删除</el-button>
			          </div>
			        </el-popover>
			        <hr />
			      </div>
			    </div>
			</el-card>
		</el-col>
	    <el-col :span="12">
			<el-carousel :interval="4000" type="card" height="350px">  
			    <el-carousel-item >
			      <img src="../assets/home/list1.png" class="list"/>
			    </el-carousel-item>
				<el-carousel-item >
				  <img src="../assets/home/list2.png" class="list"/>
				</el-carousel-item>
				<el-carousel-item >
				  <img src="../assets/home/list3.png" class="list"/>
				</el-carousel-item>
			</el-carousel>
		</el-col>
	    <el-col :span="6">
			<el-card body-style="max-width: 4800px;height: 350px;display: flex;justify-content: center;align-items: center;text-align: center;padding:0px;">
				<div id="home_two_r" style="width: 350px; height: 350px;"></div>
				<!-- <v-chart class="chart" :option="option" autoresize /> -->
	        </el-card>
	    </el-col>
	</el-row>
	<el-row :gutter="40" justify="space-around" style="margin-top: 20px;padding-left: 25px;padding-right: 25px;">
	    <el-col :span="8">
			<el-card body-style="max-width: 4800px;height: 25em;display: flex;justify-content: center;align-items: center;text-align: center;">
			    <div id="home_three_l" style="width: 450px; height: 350px;"></div>
			</el-card>
		</el-col>
	    <el-col :span="8">
			<el-card body-style="max-width: 4800px;height: 350px;display: flex;justify-content: center;align-items: center;text-align: center;">
				<div id="home_three_c" style="width: 450px; height: 350px;"></div>
	        </el-card>
	    </el-col>
	    <el-col :span="8">
			<el-card body-style="max-width: 4800px;height: 350px;display: flex;justify-content: center;align-items: center;">
				<div class="app" style="position: absolute; right: 5%; top: 3%; z-index: 100;">
				        <el-select v-model="value" placeholder="请选择">
				            <el-option
				              v-for="item in options"
				              :key="item.value"
				              :label="item.label"
				              :value="item.value">
				            </el-option>
				        </el-select>
				    </div>
				<div id="home_three_r" style="width: 480px; height: 350px;"></div>
	        </el-card>
	    </el-col>
	</el-row>
	<add-or-update ref="addOrUpdate" @refreshDataList="loadDataList"></add-or-update>
</template>

<script>
import AddOrUpdate from './message_add-or-updata.vue';
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import axios from 'axios';


export default {
	components: {
	    AddOrUpdate
	},
	data() {
	  return {
		visible: false,
		visible2: false,
		loading: false,
	    options: [
	      { value: 'data1', label: '蓝岑颗粒' },
	      { value: 'data2', label: '半夏止咳糖浆' },
	      { value: 'data3', label: '头孢克圬分散片' },
	      { value: 'data4', label: '蒲地蓝消炎片' },
	      { value: 'data5', label: '复方板蓝根颗粒' }
	    ],
		messages: [],
	    value: 'data1', // 当前选择的下拉框选项
	    chartInstance: null, // 图表实例
	  };
	},
	watch: {
	  // 监听选择的选项变化来更新图表
	  value(newVal) {
	    this.updateChartData(newVal);
	  }
	},
	methods: {
	  // 初始化图表
	  initChart() {
	    const chartDom = document.getElementById('home_three_r');
	    this.chartInstance = echarts.init(chartDom);
	    this.chartInstance.setOption({
	      // 这里是图表的初始配置，你可以设置为通用的配置
	      title: {
	        text: '药品流动统计',
	        top: '3%'
	      },
	      xAxis: {
	        type: 'category',
			// boundaryGap: false,
	        data: getWeekDates()
	      },
	      yAxis: {
	        type: 'value'
	      },
	      series: [{
	        data: [], // 初始数据为空
	        type: 'line',
			smooth:true,
			areaStyle: {
			      // 面积填充样式
			      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			        { offset: 0.4, color: 'rgba(243, 102, 255, 0.4)' }, // 渐变起始颜色
			        { offset: 0.9, color: 'rgba(251, 116, 255, 0.0)' } // 渐变结束颜色
			      ])
			    },
	      }]
	    });
	  },
	  // 更新图表数据
	  updateChartData(selectedOption) {
	    if (!this.chartInstance) {
	      // 如果图表实例不存在，则先初始化图表
	      this.initChart();
	    }
	
	    // 根据选项获取新的数据
	    const newData = this.getSeriesData(selectedOption);
	
	    // 更新图表数据
	    this.chartInstance.setOption({
	      series: [{
	        data: newData
	      }]
	    });
	  },
	  // 获取新的系列数据
	  getSeriesData(selectedOption) {
	    const dataMap = {
	      'data1': [120, 132, 101, 134, 90, 230, 210],
	      'data2': [220, 182, 191, 234, 290, 330, 310],
	      'data3': [150, 232, 201, 154, 190, 330, 410],
	      'data4': [130, 123, 121, 114, 110, 210, 310],
	      'data5': [180, 172, 161, 154, 140, 230, 320],
	      // ...更多选项数据
	    };
	    return dataMap[selectedOption] || [];
	  },
	  loadDataList: function() {
	      let that = this;
	      that.$http('/message/searchAll', 'GET', {}, true, function(resp) {
	          that.messages = resp.result;
			  console.log(that.messages);
	      });
	  },
	  addHandle:function(){
		this.visible2 = false;
	  	this.$nextTick(()=>{
	  		this.$refs.addOrUpdate.init()
	  	})
	  },
	  updateHandle: function(id) {
		  console.log(id);
	      this.$nextTick(() => {
	          this.$refs.addOrUpdate.init(id);
	      });
	  },
	  deleteHandle: function(id) {
	      let that = this;
	      let ids = id
	          ? [id]
	          : that.dataListSelections.map(item => {
	                return item.id;
	            });
	      if (ids.length == 0) {
	          ElMessage({
	              message: '没有选中记录',
	              type: 'warning',
	              duration: 1200
	          });
	      } else {
	          ElMessageBox.confirm('确定要删除选中的记录？', '提示信息', {
	              confirmButtonText: '确定',
	              cancelButtonText: '取消',
	              type: 'warning'
	          }).then(() => {
	              that.$http('/message/deleteByIds', 'POST', { ids: ids }, true, function(resp) {
	                  ElMessage({
	                      message: '操作成功',
	                      type: 'success',
	                      duration: 1200,
	                      onClose: () => {
	                          that.loadDataList();
	                      }
	                  });
	              });
	          });
	      }
	  },
	  //P标签弹出框
	  togglePopover:function(){
	      console.log('当前 visible 值：', this.visible);
	          this.visible2 = !this.visible2;
	          console.log('更新后的 visible 值：', this.visible);
	    },
	},
	mounted() {
	  // 在组件挂载时初始化图表
	  this.initChart();
	  this.updateChartData(this.value);
	  this.loadDataList();
	},
  name: 'YourComponentName',
  setup() {
    onMounted(() => {
      // 初始化第一个饼图
      var chartDom = document.getElementById('home_two_r');
      var myChart = echarts.init(chartDom);
      var option1 = {
		  title: {
		    text: '患者满意度调查',
			top:'3%',
			left:'8%'
		  },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '9%',
          left: 'center',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '70%'],
            center: ['50%', '60%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '十分满意' },
              { value: 735, name: '满意' },
              { value: 580, name: '一般' },
              { value: 484, name: '不满意' },
              { value: 300, name: '非常不满意' },
            ]
          }
        ]
      };

      myChart.setOption(option1);

      // 初始化第二个柱状图
      var chartDom2 = document.getElementById('home_three_l');
      var myChart2 = echarts.init(chartDom2);
      var option2 = {
          title: {
              text: '本周挂号数',
              // left: 'center', // 标题居中
              // textStyle: {
              //     color: '#333', // 标题颜色，可自定义
              //     fontSize: 16   // 标题字体大小，可自定义
              // },
              top: '3%'
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          xAxis: {
              type: 'category',
              data: getWeekDates(),
              axisLine: {
                  lineStyle: {
                      color: '#333' // X轴颜色
                  }
              },
              axisLabel: {
                  textStyle: {
                      color: '#333', // X轴标签的颜色
                      fontSize: 12   // X轴标签字体大小
                  }
              }
          },
          yAxis: {
              type: 'value',
              axisLine: {
                  lineStyle: {
                      color: '#333' // Y轴颜色
                  }
              },
              axisLabel: {
                  textStyle: {
                      color: '#333', // Y轴标签的颜色
                      fontSize: 12   // Y轴标签字体大小
                  }
              }
          },
          series: [{
              data: [
                  // 使用渐变色
                  { value: 120, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00c1fb' }, { offset: 1, color: '#00e2c4' }]) } },
				  { value: 200, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ed8eff' }, { offset: 1, color: '#8178ff' }]) } },
				  { value: 150, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00c1fb' }, { offset: 1, color: '#00e2c4' }]) } },
				  { value: 80, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ed8eff' }, { offset: 1, color: '#8178ff' }]) } },
				  { value: 70, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00c1fb' }, { offset: 1, color: '#00e2c4' }]) } },
				  { value: 110, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ed8eff' }, { offset: 1, color: '#8178ff' }]) } },
				  { value: 130, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00c1fb' }, { offset: 1, color: '#00e2c4' }]) } },
              ],
              type: 'bar',
              barWidth: '40%', // 设置柱子宽度
              showBackground: true,
              backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)'
              },
              itemStyle: {
                  barBorderRadius: [20, 20, 0, 0] // 设置柱状图圆角
              }
          }]
      };
      
      myChart2.setOption(option2);

	  
	  var chartDom3 = document.getElementById('home_three_c');
	  var myChart3 = echarts.init(chartDom3);
	  var option3 = {
         title: {
           text: '流感病例统计',
		   top:'3%'
         },
         tooltip: {
           trigger: 'axis'
         },
         legend: {
           data: ['甲流', '乙流', '丙流', '丁流'],
		    top:'10%'
         },
         grid: {
           left: '3%',
           right: '4%',
           bottom: '3%',
           containLabel: true
         },
         toolbox: {
           feature: {
             saveAsImage: {}
           }
         },
         xAxis: {
           type: 'category',
           boundaryGap: false,
           data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月']
         },
         yAxis: {
           type: 'value'
         },
         series: [
           {
             name: '甲流',
             type: 'line',
             stack: 'Total',
             data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90]
           },
           {
             name: '乙流',
             type: 'line',
             stack: 'Total',
             data: [220, 182, 191, 234, 290, 330, 310]
           },
           {
             name: '丙流',
             type: 'line',
             stack: 'Total',
             data: [150, 232, 201, 154, 190, 330, 410]
           },
           {
             name: '丁流',
             type: 'line',
             stack: 'Total',
             data: [320, 332, 301, 334, 390, 330, 320]
           },
           {
             name: 'Search Engine',
             type: 'line',
             stack: 'Total',
             data: [820, 932, 901, 934, 1290, 1330, 1320]
           }
        ]
    };
	  
	  myChart3.setOption(option3);
	  myChart3.resize({
		  width:400,
		  height:320
	  })
	  
	  
    });
  }
}
function getWeekDates() {
	    var now = new Date();
	    var dayOfWeek = now.getDay(); // 返回星期几，0 表示星期日
	    var dayOfMonth = now.getDate();
	    var dates = [];
	  
	    for (var i = 0; i < 7; i++) {
	      var day = new Date(now);
	      day.setDate(dayOfMonth - dayOfWeek + i); // 调整日期到本周第一天，然后加上循环的索引
	      dates.push((day.getMonth() + 1) + '-' + day.getDate()); // 格式化为月-日
	    }
	  
	    return dates;
	  }
	  
</script>

<style lang="less" scoped="scoped">
@import url('home.less');
</style>
